<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改书籍</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>

<div id="app" class="container">

    <h3>修改书籍</h3>
    <hr>

    <form>
        <div class="form-group">
            <label>序号</label>
            <input type="text" class="form-control" v-model="book.id" readonly>
        </div>

        <div class="form-group">
            <label>书名</label>
            <input type="text" class="form-control" v-model="book.name" required>
        </div>

        <div class="form-group">
            <label>作者</label>
            <input type="text" class="form-control" v-model="book.author" required>
        </div>

        <div class="form-group">
            <label>价格</label>
            <input type="number" class="form-control" v-model="book.price" required>
        </div>

        <button type="button" class="btn btn-primary" @click="doSubmit">修改</button>
        <a href="book-list.html" class="btn btn-default">返回</a>
    </form>

</div>

<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            book: {
                id: '',
                name:'',
                author:'',
                price: ''
            }
        },
        methods: {
            //根据id加载数据
            loadBookById() {
                let id = location.search.substring(1);
                //id && $('[name="id"]').val(id);
                if (id) {
                    $.get('book/getById',{id:id},function (res) {
                        if (res.code ===0){
                            vm.book = res.data;
                        }else{
                            alert(res.msg)
                        }

                    },'json')
                }
            },
            //处理提交事件
            doSubmit(){
              $.post('/book/update',this.book,function (res) {
                  if (res.code === 0){
                      alert("修改成功！")
                      location.href = 'book-list.html'
                  }else {
                      alert(res.msg)
                  }
              })
            }
        },
        created(){
            this.loadBookById();
        }
    })
</script>

</body>
</html>